<template>
  <div class="my-video">
    <div class="video-content">
      <div class="video-search">
        <el-input class="search-input" v-model="keywords" placeholder="请输入内容"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="goSearch()">搜索</el-button>
      </div>
      <div class="video-body">
        <album-content :songList="videoList"></album-content>
        <el-pagination class="mpage"
                       background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       layout="total, sizes, prev, pager, next, jumper"
                       :current-page="currentPage"
                       :page-size="pageSize"
                       :page-sizes="[10, 20, 50, 100]"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import mixin from '../mixins'
import AlbumContent from '../components/AlbumContent'
import {getUserUploadVideo} from '../api/index'

export default {
  name: 'my-video',
  mixins: [mixin],
  components: {
    AlbumContent
  },
  data () {
    return {
      videoList: [], // 收藏的歌曲
      keywords: '',
      currentPage: 1,
      total: 0,
      pageSize: 10
    }
  },
  computed: {
    ...mapGetters([
      'userId',
      'id',
      'listOfSongs' // 存放的音乐
    ])
  },
  mounted () {
    this.getUserUploadVideo(this.currentPage, this.pageSize, '')
  },
  methods: {
    getUserUploadVideo (currentPage, pageSize, keyword) {
      let _this = this
      let token = _this.$store.getters.token
      let params = {'keyword': keyword, 'currentPage': currentPage, 'pageSize': pageSize}
      let headers = {'Authorization': token}
      getUserUploadVideo(params, headers).then(res => {
        this.videoList = res.data.records
        this.currentPage = res.data.current
        this.pageSize = res.data.size
        this.total = res.data.total
      })
    },
    goSearch () {
      this.getUserUploadVideo(this.currentPage, this.pageSize, this.keywords)
    },
    handleSizeChange (pageSize) {
      this.getUserUploadVideo(this.currentPage, pageSize, this.keywords)
    },
    handleCurrentChange (currentPage) {
      this.getUserUploadVideo(currentPage, this.pageSize, this.keywords)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/my-video';
</style>
